<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';

import { useUserStore } from '@/stores/user';
import { isBlackListUser } from '@/utils'
import { useLocalStorage } from '@vueuse/core';

// public components
import BiWallet from '@/components/bi-wallet/index.vue'
import BiHeader from '@/components/bi-header/index.vue'
import BiNotice from '@/components/bi-notice/index.vue'
import BiSignin from '@/components/bi-signin/index.vue'
// import BiInvited from '@/components/bi-invited/index.vue'
import BiPopup from '@/components/bi-popup/index.vue'
import SignInvitedPopup from '@/components/bi-signin-plus-invited-popup/index.vue'

// pages components
import NewbieTask from './components/newbieTask.vue'
import Lottery from './components/lottery.vue'
import TodayTask from './components/todayTask.vue'
import DailyTask from './components/dailyTask.vue'

const router = useRouter()
const userStore = useUserStore()

const isNewUser = computed(() => {
    return (userStore.info).isCompleteNewTail === 0
})

const showWithdrawPopup = ref(false)
const openWithdrawPopup = () => {
    showWithdrawPopup.value = true
}

const showSignAndInvited = ref(false)
const openSignAndInvitedPopup = () => {
    showSignAndInvited.value = true
}
const handleSetSignAndInvitedPopupExpiredTime = () => {
    if (isBlackListUser(userStore.device)) {
        return
    }
    const todayStorage = localStorage.getItem('__sign_and_invited_expired__')
    const notToday = new Date().toDateString() !== todayStorage
    if (!todayStorage || notToday) {
        openSignAndInvitedPopup()
        localStorage.setItem('__sign_and_invited_expired__', new Date().toDateString())
        return
    }
}
const userInfo = ref(userStore.info)
userStore.$subscribe((_mutation, state) => {
    userInfo.value = state.info
    handlePopupPage()
})

const handlePopupPage = () => {
    const notIntoExchangePage = !localStorage.getItem('withdraw')
    const notOpenWithdrawPopup = !localStorage.getItem('alreadyOpen')
    const finishNewbieTask = userInfo.value.isCompleteNewTail == 1 && userInfo.value.finishNewbieTask == 0
    if (notIntoExchangePage && notOpenWithdrawPopup && finishNewbieTask && userInfo.value.totalAmount >= 1) {
        openWithdrawPopup()
        localStorage.setItem('alreadyOpen', 'true')
    }

    handleSetSignAndInvitedPopupExpiredTime()
}
handlePopupPage()

const handleToExchange = () => {
    router.push('/exchange')
}

const newbie = ref()
const daily = ref()
onMounted(() => {
    window.refreshUser = () => {
        userStore.handleGetUserInfo()
    }
    window.getNewBenefitList = () => {
        newbie.value.handleFetchNewbieTask()
    }
    window.getDailyTaskList = () => {
        daily.value.handleGetDailyTaskList()
    }
    window.refreshAll = () => {
        userStore.handleGetUserInfo()
        newbie.value.handleFetchNewbieTask()
        daily.value.handleGetDailyTaskList()
    }
})

const isFirst = useLocalStorage('__is_first__', 0)
const showRulesPopup = ref(false)
function handleOpenRulesPopup() {
    showRulesPopup.value = true
}
const firstRules = [
    'Unlock the bible and read it.',
    'Unlock the audio and listen to it. ',
    'Unlock the video and watch it.',
    'Take on the Quiz challenges and answer them correctly.'
]
if (isFirst.value === 0) {
    handleOpenRulesPopup()
    isFirst.value = 1
}
function handleUseAndroidApi() {
    try {
        android.jumpToQuiz()
    } catch (error) {
        console.log(error)        
    }
}
</script>

<template>
    <div class="index">
        <BiHeader />
        <BiNotice />
        <div class="sticky" style="position: sticky;top: 0;z-index: 99;">
            <BiWallet @question="handleOpenRulesPopup" />
        </div>
        <div class="card">
            <BiSignin v-if="!isBlackListUser(userStore.device)" />
        </div>
        <NewbieTask ref="newbie" v-if="isNewUser" />
        <Lottery />
        <TodayTask />
        <!-- <div class="card">
            <BiInvited />
        </div> -->
        <DailyTask ref="daily" />
    </div>

    <!-- 进入页面首次弹窗 -->
    <BiPopup v-model:show="showRulesPopup" button-text="Go" type="tour" @click="handleUseAndroidApi">
        <template #title>
            Obtain church check-in travel funds in the following ways:
        </template>
        <template #content>
            <ul class="first">
                <li v-for="rule in firstRules">
                    {{ rule }}
                </li>
            </ul>
        </template>
    </BiPopup>

    <!-- 提醒新用户提现弹窗 -->
    <BiPopup v-model:show="showWithdrawPopup" button-text="Go" type="task" @click="handleToExchange">
        <span class="red-text"
            style="width: 50vmin;margin-top: 0;line-height: 1.3;text-align: center;font-weight: bold">You
            can get $1 for a church check-in tour</span>
    </BiPopup>

    <!-- 签到加邀请弹窗 -->
    <SignInvitedPopup v-model:show="showSignAndInvited" />

</template>

<style scoped lang="scss">
@import url(./index.scss);
</style>